<template>
  <div class="payment-info">
    <h2 style="font-size: 25px">请尽快支付订单,剩余时间<van-count-down style="color:red;font-size: 30px" :time="time" class="van-cards"/></h2>

    <van-field v-model="forma.listofserveId" label="添加服务地址" placeholder="请填写服务地址" required is-link readonly
               @click="onSelectServiceType" />
    <van-field v-model="forma.listofDate" label="预约时间" placeholder="请填写预约时间" required is-link readonly
               @click="onSelectDateType" />
    <div>
      <span>出行方式 <van-tag type="success" class="around">公交</van-tag><van-tag plain type="primary" class="around1">滴滴</van-tag></span>
    </div>

    <van-cell-group class="van-text">
      <van-field v-model="value" label="备注" placeholder="请输入您要备注的信息" />
    </van-cell-group>

    <van-cell >
      <div slot="title">
        <div class="order-info">
          <img
              :src="ordersImg"
              alt="Service"
              class="service-image"
          />
          <span class="order-service">{{ orders.name }}</span><br>
          <span class="order-technician" style="font-size: 15px; color: #666666">技师：{{ orders.tname }}</span><br>
          <span class="order-duration"><van-icon name="clock-o" />{{ orders.minutes }}分钟</span>
          <span class="order-price1">¥{{ orders.price }}</span>
        </div>
      </div>
    </van-cell>

    <van-field v-model="forma.listofYou" label="优惠券" placeholder="" required is-link readonly
               @click="onSelectYouType" />

    <van-field label="车费"  readonly /><br>
    <van-field label="支付方式"  readonly /><br>
    <span class="van-total">合计：￥188</span>
    <h3>订单信息</h3>
    <van-field label="订单号" readonly >{{orders.orderid}}</van-field><br>
  </div>
</template>

<script>
import OrderItem from './OrderItem.vue';
import { CountDown } from 'vant';
import { Toast } from 'vant';
import axios from "axios";

export default {
  components: {
    [CountDown.name]: CountDown,
    OrderItem
  },
  props: ['order'],
  data() {
    return {
      orders:{},
      time: 1000 * 60 * 30, // 30分钟
      forma: {
        listofserveId: '',
        listofDate: '',
        listofYou:''
      },
      value: '',
      ordersImg: 'https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/9b602a990f2b4b03af964228be8d4fa8.png',
      // 其他数据...
    };
  },
  methods: {
    onSelectServiceType() {
      this.$router.push('/address');
    },
    onSelectDateType() {
      this.$router.push('/selectTimes');
    },
    onSelectYouType(){
      this.$router.push('/youhuijuan');
    },
    findAll(orderId) {
      axios.get(`http://localhost:10086/particulars/findById/${orderId}`).then(res => {
        this.orders = res.data[0];
      });
    }
  },
  created() {
      const orderId = this.$route.query.orderId;
      console.log(orderId);
      if (orderId) {
        this.findAll(orderId);
      } else {
        console.error('未找到订单ID');
      }

  }
};
</script>

<style>
.van-cards {
  float: right;
  margin-top: 10px;
}
.around {
  width: 40px;
  height: 35px;
  float: right;
  margin-left: 10px;
  text-align: center;
}
.around1 {
  width: 40px;
  height: 35px;
  float: right;
}
.van-text {
  margin-top: 15px;
}
.service-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}
.van-total{
  color: red;
  float: right;
  font-size: 25px;
}
.order-price1 {
  float: right;
  font-size: 20px;
  color: red;
}
</style>

